<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>
        软工导论_小游戏——斯卡蒂大冒险 - GraphyHao&#39;s Blog
      </title>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    
    <meta name="theme-color" content="#000000" />
    
    <meta http-equiv="window-target" content="_top" />
    
    
    <meta name="description" content="好耶!" />
    <meta name="generator" content="Hugo 0.75.1 with theme pure" />
    <title>软工导论_小游戏——斯卡蒂大冒险 - GraphyHao&#39;s Blog</title>
    
    
    <link rel="stylesheet" href="https://graphyhao.gitee.io/css/style.min.154c4cb4eedc210cfb116dc53b5438862a3a5519e854789ff967126ae88c565c.css">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.15.10/styles/github.min.css" async>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css" async>
    <meta property="og:title" content="软工导论_小游戏——斯卡蒂大冒险" />
<meta property="og:description" content="好耶!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://graphyhao.gitee.io/2020/09/cp4.html" />
<meta property="article:published_time" content="2000-01-01T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-09-29T14:00:04+08:00" />
<meta itemprop="name" content="软工导论_小游戏——斯卡蒂大冒险">
<meta itemprop="description" content="好耶!">
<meta itemprop="datePublished" content="2000-01-01T00:00:00+00:00" />
<meta itemprop="dateModified" content="2020-09-29T14:00:04+08:00" />
<meta itemprop="wordCount" content="1330">



<meta itemprop="keywords" content="软工导论,做游戏," />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="软工导论_小游戏——斯卡蒂大冒险"/>
<meta name="twitter:description" content="好耶!"/>

    <!--[if lte IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
      <![endif]-->

    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
      <![endif]-->
  </head>

  
  

  <body class="main-center theme-purple" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div class="slimContent">
      <div class="navbar-header">
        <div class="profile-block text-center">
          <a id="avatar" href="https://graphyhao.gitee.io/" target="_blank">
            <img class="img-circle img-rotate" src="https://graphyhao.gitee.io/yun.jpeg" width="200" height="200">
          </a>
          <h2 id="name" class="hidden-xs hidden-sm">GraphyHao</h2>
          <h3 id="title" class="hidden-xs hidden-sm hidden-md">瓜皮浩的博客</h3>
          <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i>Guangzhou, China</small>
        </div><div class="search" id="search-form-wrap">
    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i
                        class="icon icon-search"></i></button>
            </span>
        </div>
        <div class="ins-search">
            <div class="ins-search-mask"></div>
            <div class="ins-search-container">
                <div class="ins-input-wrapper">
                    <input type="text" class="ins-search-input" placeholder="想要查找什么..."
                        x-webkit-speech />
                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="ins-section-wrapper">
                    <div class="ins-section-container"></div>
                </div>
            </div>
        </div>
    </form>
</div>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
        <ul class="nav navbar-nav main-nav">
            <li class="menu-item menu-item-home">
                <a href="/">
                    <i class="icon icon-home-fill"></i>
                  <span class="menu-title">首页</span>
                </a>
            </li>
            <li class="menu-item menu-item-archives">
                <a href="/posts/">
                    <i class="icon icon-archives-fill"></i>
                  <span class="menu-title">文章</span>
                </a>
            </li>
            <li class="menu-item menu-item-categories">
                <a href="/categories/">
                    <i class="icon icon-folder"></i>
                  <span class="menu-title">分类</span>
                </a>
            </li>
            <li class="menu-item menu-item-tags">
                <a href="/tags/">
                    <i class="icon icon-tags"></i>
                  <span class="menu-title">标签</span>
                </a>
            </li>
            <li class="menu-item menu-item-gallery">
                <a href="/gallery/">
                    <i class="icon icon-book-fill"></i>
                  <span class="menu-title">落书</span>
                </a>
            </li>
            <li class="menu-item menu-item-about">
                <a href="/about/">
                    <i class="icon icon-cup-fill"></i>
                  <span class="menu-title">关于</span>
                </a>
            </li>
        </ul>
      </nav>
    </div>
  </header>

<aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content"><p>博客更新theme了爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽</p>
            </div>
        </div>
    </div>
</div>

      <div class="widget">
    <h3 class="widget-title"> 分类</h3>
    <div class="widget-body">
        <ul class="category-list">
            <li class="category-list-item"><a href="https://graphyhao.gitee.io/categories/%E8%BD%AF%E5%B7%A5%E5%AE%9E%E8%AE%AD.html" class="category-list-link">软工实训</a><span class="category-list-count">1</span></li>
            <li class="category-list-item"><a href="https://graphyhao.gitee.io/categories/%E8%BD%AF%E5%B7%A5%E5%AF%BC%E8%AE%BA.html" class="category-list-link">软工导论</a><span class="category-list-count">5</span></li>
        </ul>
    </div>
</div>
      <div class="widget">
    <h3 class="widget-title"> 标签</h3>
    <div class="widget-body">
        <ul class="tag-list">
            
            
            <li class="tag-list-item"><a href="https://graphyhao.gitee.io/tags/hugo.html" class="tag-list-link">hugo</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://graphyhao.gitee.io/tags/test.html" class="tag-list-link">test</a><span
                    class="tag-list-count">3</span></li>
            
            
            <li class="tag-list-item"><a href="https://graphyhao.gitee.io/tags/web.html" class="tag-list-link">web</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://graphyhao.gitee.io/tags/%E5%81%9A%E6%B8%B8%E6%88%8F.html" class="tag-list-link">做游戏</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://graphyhao.gitee.io/tags/%E8%BD%AF%E5%B7%A5%E5%AF%BC%E8%AE%BA.html" class="tag-list-link">软工导论</a><span
                    class="tag-list-count">6</span></li>
            
        </ul>

    </div>
</div>
      
<div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
        <ul class="recent-post-list list-unstyled no-thumbnail">
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://graphyhao.gitee.io/2020/10/h5.html" class="title">软工导论_作业五</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-10-07 18:00:04 &#43;0800 CST" itemprop="datePublished">2020-10-07</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://graphyhao.gitee.io/2020/10/h4.html" class="title">软工导论_作业四</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-10-07 14:00:04 &#43;0800 CST" itemprop="datePublished">2020-10-07</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://graphyhao.gitee.io/2020/09/cp4.html" class="title">软工导论_小游戏——斯卡蒂大冒险</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-09-29 14:00:04 &#43;0800 CST" itemprop="datePublished">2020-09-29</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://graphyhao.gitee.io/2020/09/h3.html" class="title">软工导论_作业三</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-09-28 03:55:04 &#43;0800 CST" itemprop="datePublished">2020-09-28</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://graphyhao.gitee.io/2020/09/h2.html" class="title">软工导论_作业二</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-09-28 02:55:04 &#43;0800 CST" itemprop="datePublished">2020-09-28</time>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
  </div>
</aside>

    
    
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <h4 class="toc-title">文章目录</h4>
    <nav id="toc" class="js-toc toc">

    </nav>
  </div>
</aside>
<main class="main" role="main"><div class="content">
  <article id="-" class="article article-type-" itemscope
    itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      <h1 itemprop="name">
  <a
    class="article-title"
    href="/2020/09/cp4.html"
    >软工导论_小游戏——斯卡蒂大冒险</a
  >
</h1>

      <div class="article-meta">
        
<span class="article-date">
  <i class="icon icon-calendar-check"></i>&nbsp;
<a href="https://graphyhao.gitee.io/2020/09/cp4.html" class="article-date">
  <time datetime="2020-09-29 14:00:04 &#43;0800 CST" itemprop="datePublished">2020-09-29</time>
</a>
</span>
<span class="article-category">
  <i class="icon icon-folder"></i>&nbsp;
  <a class="article-category-link" href="/categories/%E8%BD%AF%E5%B7%A5%E5%AE%9E%E8%AE%AD/"> 软工实训 </a>
</span>  
  <span class="article-tag">
    <i class="icon icon-tags"></i>&nbsp;
    <a class="article-tag-link" href="/tags/%E8%BD%AF%E5%B7%A5%E5%AF%BC%E8%AE%BA/"> 软工导论 </a>
    <a class="article-tag-link" href="/tags/%E5%81%9A%E6%B8%B8%E6%88%8F/"> 做游戏 </a>
  </span>

	<span class="article-read hidden-xs">
    	<i class="icon icon-eye-fill" aria-hidden="true"></i>
    	<span id="https://graphyhao.gitee.io/2020/09/cp4.html" class="leancloud_visitors"  data-flag-title="软工导论_小游戏——斯卡蒂大冒险">0</span>
    </span>
        <span class="post-comment"><i class="icon icon-comment"></i>&nbsp;<a href="/2020/09/cp4.html#comments"
            class="article-comment-link">评论</a></span>
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 1330字</span>
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 3分 </span>
      </div>
    </div>
    
    
    <audio controls>
      <source src="/music/Mitch Murder - killer angels [mqms2].mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
    </audio>


    <div class="article-entry marked-body js-toc-content" itemprop="articleBody">
      <h2 id="游戏链接">游戏链接：</h2>
<h2 id="httpsgraphyhaogiteeiogame1"><a href="https://graphyhao.gitee.io/game1/">https://graphyhao.gitee.io/game1/</a></h2>
<p>视频<a href="https://www.bilibili.com/video/BV1Ay4y1C7FM/">https://www.bilibili.com/video/BV1Ay4y1C7FM/</a></p>
<p>这是软工实训的第一个作业，使用 construct3 完成的简单动作小游戏，本质是恶搞游戏。</p>
<p>但是，做游戏还是用点正经点的工具（比如Unity什么的），别再用这破玩意了!（作为教学工具倒是很合适）</p>
<p><img src="/images/game1/title.jpg" alt="skadi&rsquo;s avg"></p>
<p>.</p>
<p>.</p>
<p>.</p>
<hr>
<h3 id="对-construct3-工具的个人理解">对 Construct3 工具的个人理解</h3>
<p>首先，construct3中实现是以对象为基础的，因此制作过程中十分易懂。</p>
<p>具体是以对象+场景+事件表来实现一个基本游戏的流程。因此过程是十分快乐的，可以把重心只停留在一个主体部分制作，可以先从操作人物开始做起，然后到敌人，场景，诸如此类。</p>
<h3 id="construct3的事件表是如何实现的">Construct3的事件表是如何实现的？</h3>
<p>我的理解是事件表中分为两种不同的事件，一种带箭头的，是触发型事件，一种不带箭头的，是每一帧都会检测的条件。游戏在进行的时候，有一些函数在触发时会发出信号，这个信号系统会接受到，并会把对应的事件放入当前帧执行，此外之后就会遍历事件表中没有箭头的所有if语句事件。</p>
<p><img src="/images/game1/1.png" alt="事件表"></p>
<h3 id="游戏制作前">游戏制作前</h3>
<p>首先是游戏的类型选择，自己想做什么样的游戏？首先是确定了做个明日方舟的同人小游戏（为了群友），然后是经典的横板跳跃格斗游戏。好，到此为止我的想法就结束了，此后一直在制作主角斯卡蒂的各种动作，但后面发现，斯卡蒂的动作和预想的敌人模式十分不契合（因为实际上原来的想法是横板的弹幕类格斗游戏），导致我浪费了很多的时间。所以一定要在制作前先列一个大纲。</p>
<p>单机游戏，是人类和机器的博弈，乐趣是在这种博弈中产生的，因此敌人和主角设计要契合，比如我想弄个东方式的游戏，结果我做出来的主角只能近战，那我打个🐍。像只狼中的设计，主角的动作虽少(只能攻击、格挡、跳跃、冲刺)，但是和敌人的攻击模式契合的很好，基本任何敌人的攻击都能配合动作见招拆招。</p>
<p>然后是游戏的规模选择，我的游戏体量能多大？我在做的时候，首先是想弄第一关、第二关、第三关……结果最后发现</p>
<h2 id="这construct3免费版的功能是真的少把对象分类还要加害限制我只能写50个事件">这construct3免费版的功能是真的少，把对象分类还要加💴，害限制我只能写50个事件，</h2>
<p>于是空想就都没有了，只能选择做一个boss的追逐战的一关游戏了。</p>
<h3 id="游戏制作中">游戏制作中</h3>
<p>说实话，我觉得在制作中代码还是其次的，素材的拼接才是真的累人，有可能花了我大半的时间（所以动画十分敷衍，如果有一个艺术型选手可能就会好很多）游戏的画面当然只能选择比较没那么难做的像素风，但像素风也不是缺点，很多好作品都是像素风格。</p>
<p>对象 对象 对象，各种对象的组合，各种行为，都要加代码（而且免费版还不能分类），bug在这个时候就会出现很多，建议以后把一个完整的动作执行图画出来再开始做。</p>
<p>“触发器”：我把它当作mc中的压力板，踩一下就触发一个事件，表现为你可以用一个透明的对象，当玩家碰撞到就执行一段命令。
<img src="/images/game1/2.png" alt="触发器"></p>
<p>数值设计，这个就太太太难了，我是发给群友玩了之后，发现普遍是太难了，于是才调了各数值。数值策划，真的很有用啊！</p>
<h3 id="游戏制作后">游戏制作后</h3>
<p>大体做完后就开始增添一些花里胡哨的东西了，比如音效什么的，背景音什么的，（然后就沦为了生草作品）</p>
<h3 id="巨大问题">巨大问题</h3>
<p>攻击是帧率攻击，而没有设置伤害间隔，但当我意识到的时候，已经没有多余的代码了（指免费版限制50行）</p>
<h2 id="然后最后的最后做游戏还是用点正经点的工具比如unity什么的别用这破玩意了">然后，最后的最后，做游戏还是用点正经点的工具（比如Unity什么的），别用这破玩意了!😈😈😈😈</h2>

    </div>
    <div class="article-footer">
<blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接: </strong>
      <a href="https://graphyhao.gitee.io/2020/09/cp4.html" title="软工导论_小游戏——斯卡蒂大冒险" target="_blank" rel="external">https://graphyhao.gitee.io/2020/09/cp4.html</a>
    </li>
    <li class="post-copyright-license">
      <strong>License：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN</a>
    </li>
  </ul>
</blockquote>

<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://graphyhao.gitee.io/" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://graphyhao.gitee.io/yun.jpeg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://graphyhao.gitee.io/" target="_blank"><span class="text-dark">GraphyHao</span><small class="ml-1x">瓜皮浩的博客</small></a></h3>
        <div>我要吃憨八哥啊啊啊啊啊啊啊啊啊啊啊</div>
      </div>
    </figure>
  </div>
</div>
    </div>
  </article>
<section id="comments">
    <div id="vcomments"></div>
</section>

</div><nav class="bar bar-footer clearfix" data-stick-bottom>
    <div class="bar-inner">
        <ul class="pager pull-left">
            <li class="prev">
                <a href="https://graphyhao.gitee.io/2020/09/h3.html" title="软工导论_作业三"><i
                        class="icon icon-angle-left"
                        aria-hidden="true"></i><span>&nbsp;&nbsp;下一篇</span></a>
            </li>
            <li class="next">
                <a href="https://graphyhao.gitee.io/2020/10/h4.html"
                    title="软工导论_作业四"><span>上一篇&nbsp;&nbsp;</span><i
                        class="icon icon-angle-right" aria-hidden="true"></i></a>
            </li>
            
            <li class="toggle-toc">
                <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false"
                    title="文章目录" role="button">
                    <span>[&nbsp;</span><span>文章目录</span>
                    <i class="text-collapsed icon icon-anchor"></i>
                    <i class="text-in icon icon-close"></i>
                    <span>]</span>
                </a>
            </li>
        </ul>
        <div class="bar-right">
            <div class="share-component" data-sites="weibo,qq,wechat,twitter"
                data-mobile-sites="weibo,wechat,qq,qzone"></div>
        </div>
    </div>
</nav>

</main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<ul class="social-links">
    <li><a href="https://github.com/hatut" target="_blank" title="github" data-toggle=tooltip data-placement=top >
            <i class="icon icon-github"></i></a></li>
    <li><a href="https://twitter.com/NGrafield" target="_blank" title="twitter" data-toggle=tooltip data-placement=top >
            <i class="icon icon-twitter"></i></a></li>
    <li><a href="http://weibo.com/hatut" target="_blank" title="weibo" data-toggle=tooltip data-placement=top >
            <i class="icon icon-weibo"></i></a></li>
</ul>
  <div class="copyright">
    &copy;2019  -
    2020
    <div class="publishby">
        Theme base on <a href="https://github.com/xiaoheiAh" target="_blank"> xiaoheiAh </a> 's <a href="https://github.com/xiaoheiAh/hugo-theme-pure" target="_blank"> pure</a>.
    </div>
  </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            showMathMenu: false, //disables context menu
            tex2jax: {
            inlineMath: [ ['$','$'], ['\\(','\\)'] ]
           }
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/python.min.js" defer></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/javascript.min.js" defer></script><script>
    hljs.configure({
        tabReplace: '    ', 
        classPrefix: ''     
        
    })
    hljs.initHighlightingOnLoad();
</script>
<script src="https://graphyhao.gitee.io/js/application.min.bdeb64b910570b6c41badc6a05b7afb0c8ad9efd8525de3c7257d59e786326a3.js"></script>
<script src="https://graphyhao.gitee.io/js/plugin.min.51ff8c7317566f82259170fa36e09c4493adc9b9378b427a01ad3f017ebac7dd.js"></script>

<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(未命名)',
            },
            ROOT_URL: 'https:\/\/graphyhao.gitee.io\/',
            CONTENT_URL: 'https:\/\/graphyhao.gitee.io\/\/searchindex.json ',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script type="text/javascript" src="https://graphyhao.gitee.io/js/insight.min.a343cd9a5a7698336b28ef3a7c16a3a1b1d2d5fb17dc8ed04022bbe08cc5459073a15bdafa3a8a58cdd56080784bdd69fa70b1ae8597565c799c57ed00f0e120.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<script>
    tocbot.init({
        
        tocSelector: '.js-toc',
        
        contentSelector: '.js-toc-content',
        
        headingSelector: 'h1, h2, h3',
        
        hasInnerContainers: true,
    });
</script>

<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine"></script>
<script type="text/javascript">
    var GUEST = ['nick', 'mail', 'link'];
    var meta = 'nick,mail';
    meta = meta.split(',').filter(function (item) {
        return GUEST.indexOf(item) > -1;
    });
    new Valine({
        el: '#vcomments',
        verify: null ,
        notify: true ,
        appId: '5344hnGlswDIeceT6KP94TcD-gzGzoHsz',
        appKey: 'uheypCj1LpGPTz0PQVb60YOS',
        placeholder: '发条友善的评论~',
        avatar: 'retro',
        meta: meta,
        pageSize: '10' || 10,
        visitor: true 
});
</script>

  </body>
</html>
